<template>
    <div class="taskIndex">
        <!--图片轮播-->
        <van-swipe :autoplay="3000" :show-indicators="false">
            <van-swipe-item v-for="(item, index) in bannerList" :key="index">
                <pk-img :src="item.picture"
                        width="100%">
                </pk-img>
            </van-swipe-item>
        </van-swipe>
        <div class="categoryBtnWrap">
            <div v-for="(item, index) in categoryOptions"
                 :key="index"
                 @click="handleCategoryType(index)"
                 class="categoryBtn text-white-pk" :class="{active: item.isSelect}">
                {{item.name}}
            </div>
        </div>
        <div class="categoryCntWrap">
            <div v-for="(item, index) in categorySelected" :key="index" @click="handleCategorySelect(item,index)" class="categoryCnt text-black-pk" :class="{active: item.isSelect}">{{item.name}}</div>
        </div>
        <van-pull-refresh v-model="isRefreshing" @refresh="onRefresh" ref="">
            <van-list
                    ref=""
                    v-model="loading"
                    :finished="finished"
                    :immediate-check="false"
                    finished-text="没有更多了"
                    @load="onLoad">
                <div class="taskGoodsWrap  text-gray-b3-pk">
                    <div v-for="(item, index) in taskList"
                         :key="index"
                         @click="taskDetail(item)"
                         class="taskGoods" >
                        <pk-img
                                :src="item.goodsPic"
                                width="170px"
                                height="120px">
                        </pk-img>
                        <div class="goodsItem goodsName text-black-pk">{{item.goodsName}}</div>
                        <div class="goodsItem he-grey ">开始时间：{{item.beginTime}}</div>
                        <div class="goodsItem he-grey ">截至时间：{{item.endTime}}</div>
                        <div class="goodsItem he-grey  joinData">
                            <div >赏金:<span class="text-red-pk">{{item.reward}}</span></div>
                            <div>参与人数:<span class="text-red-pk">{{item.taskReceive}}</span></div>
                        </div>
                        <task-status-icon :is-type="true" :status="taskStatusFmt(item.status)" :status-brg="taskStatusBrgFmt(item.status)" :type="taskTypeFmt(item.taskType)" class="statusIcon"></task-status-icon>
                    </div>
                    <div class="taskItemTemp" :class="{active: itemTempActive}">
                        temp
                    </div>
                </div>
            </van-list>
        </van-pull-refresh>
    </div>
</template>

<script>
    import taskStatusIcon from "./TaskStatusIcon"
    export default {
        name: "taskIndex",
        components: {
            taskStatusIcon},

        data() {
            return {
                bannerList:[],
                categoryOptions:[
                    {
                        name : '跑屏类型',
                        initName : '跑屏类型',
                        init: false,
                        isSelect: true,
                        children: [],
                        selectedItem:[]
                    },
                    {
                        name : '商品类型',
                        initName : '商品类型',
                        init: false,
                        isSelect: false,
                        children: [],
                        selectedItem:[]
                    },
                    {
                        name : '赏金等级',
                        initName : '赏金等级',
                        init: false,
                        isSelect: false,
                        children: [],
                        selectedItem:[]
                    },
                    {
                        name : '排序',
                        initName : '排序',
                        init: false,
                        isSelect: false,
                        children: [],
                        selectedItem:[]

                    },
                    {
                        name : '状态',
                        initName : '状态',
                        init: false,
                        isSelect: false,
                        children: [],
                        selectedItem:[]
                    }
                ],
                categorySelected: [],
                activeIndex: -1,
                page: 1,
                pages: 0,
                size: this.$global.size,
                total: 0,
                search: {
                    goodsCategoryId: "",
                    taskType: "",
                    reward: "",
                    sortType: "",
                    status: ""
                },
                itemTempActive: false, // 列表数据为奇数，增加一个标签，偶数保证样式布局
                taskList:[],
                isRefreshing: false,//上拉刷新
                loading: false,
                finished: false,

            }
        },

        created() {
           this.initData();
           this.getUserInfo();
            this.getTaskList();
        },
        computed: {},
        watch: {},
        methods: {
            //上拉刷新
            onRefresh() {
                this.$toast.loading({
                    message: "加载中...",
                });
                this.page = 1;
                this.size = this.$global.size;
                this.getTaskList();
                this.isRefreshing = false
            },
            //下拉加载
            onLoad() {
                if(this.page >= this.pages) {
                    this.finished = true
                }else {
                    this.page ++;
                    this.getTaskList("load")
                }
            },
            //获取用户信息
            getUserInfo(){
                this.$api.getUserInfo('1').then(res=>{
                    let result=this.$resData(res);
                    if(result){
                        this.userInfo=result;
                    }
                })
            },
            initData(){
                this.getBannerList();


            },
            //获取轮播图
            getBannerList(){
                this.$api.getTaskBannerList("3").then(res=>{
                    let result=this.$resData(res);
                    if(result){
                        this.bannerList=result
                    }
                })
            },
            //查询类型点击事件
            handleCategoryType(index) {
                //1跑屏类型 2商品类型 3赏金等级 4排序 5状态
                //进入页面只每种类型只请求一次；
                //再次重新进入页面，每种类型都重新请求一次
                //下属项目是否选择做判断
                this.activeIndex = index;
                for(let i=0; i<this.categoryOptions.length; i++) {
                    if(i === index) {
                        continue
                    }
                    let valid = false;
                    let item = this.categoryOptions[i];
                    if(item.children && Array.isArray(item.children)) {
                        for(let j=1; j<item.children.length; j++ ) {
                            if(item.children[j].isSelect) {
                                valid = true
                            }
                        }
                    }
                    item.isSelect = valid;
                }
                this.categoryOptions[index].isSelect = true;
                if(this.categoryOptions[index].init && this.categoryOptions[index].children.length > 0) {
                    this.categorySelected = this.categoryOptions[index].children;
                    return false
                }
                let type = parseInt(index) +1;
                this.$api.getTaskSearchTypeList(type).then(res => {
                    this.categoryOptions[index].init = true;
                    let result = this.$resData(res);
                    if(result) {
                        this.categorySelected = result.map(item => {
                            item.isSelect = false;
                            return item
                        });
                        this.categoryOptions[index].children = this.categorySelected;
                    }
                });
            },
            //触发筛选条件，请求数据
            handleCategorySelect(item,index) {
                this.taskSearchTypeFmt(item.value);
                this.page = 1;
                this.size = this.$global.size;
                this.$toast({
                    message:"加载中..."
                })
                let that = this;
                setTimeout(function () {
                    that.getTaskList("filter");
                }, 200);
                for(let i=0; i<this.categorySelected.length; i++) {
                    this.categorySelected[i].isSelect = (i === index)
                }
                if(index == 0) {
                    this.categoryOptions[this.activeIndex].name = this.categoryOptions[this.activeIndex].initName
                }else {
                    this.categoryOptions[this.activeIndex].name = this.categorySelected[index].name
                }
                this.categoryOptions[this.activeIndex].children = this.categorySelected;
            },
            taskSearchTypeFmt(value) {
                //1跑屏类型 2商品类型 3赏金等级 4排序 5状态
                let index = parseInt(this.activeIndex) + 1;
                if (index) {
                    switch (index) {
                        case 1:
                            this.search.taskType = value;
                            break;
                        case 2:
                            this.search.goodsCategoryId = value;
                            break;
                        case 3:
                            this.search.reward = value;
                            break;
                        case 4:
                            this.search.sortType = value;
                            break;
                        case 5:
                            this.search.status = value;
                            break;
                    }
                }
            },
            getTaskList(type){
                this.$api.getTaskList({
                    page: this.page,
                    size: this.size,
                    goodsCategoryId: this.search.goodsCategoryId,
                    taskType: this.search.taskType,
                    reward: this.search.reward,
                    sortType: this.search.sortType,
                    status: this.search.status,
                }).then( res => {
                    this.$toast.clear();
                    this.loading = false;
                    let result = this.$resData(res);
                    if(result) {
                        this.total = parseInt(result.total);
                        this.pageNum = result.pageNum;
                        this.pages = result.pages;
                        if(type === "load"){
                            this.taskList = this.taskList.concat(result.list);
                        }else {
                            this.taskList = result.list;
                        }
                       let length = this.taskList.length;
                        this.itemTempActive = (length%2 === 1)

                    }
                })
            },
            //任务状态翻译
            taskStatusFmt(status) {
                let arr = [
                    {value: "0", name: "进行中"},
                    {value: "1", name: "已结束"},
                    {value: "5", name: "已完成"},
                ];
                return this.$util.dictTranslate(arr, status)
            },
            //任务状态背景颜色翻译
            taskStatusBrgFmt(status) {
                let arr = [
                    {value: "0", name: "bg-yellow"},
                    {value: "1", name: "bg-red-pk"},
                    {value: "5", name: "bg-green-pk"},
                ];
                return this.$util.dictTranslate(arr, status)
            },
            //  taskType 任务类型：0：直接跑 1：一起跑
            taskTypeFmt(taskType){
                let arr = [
                    {value: "0", name: "直接跑"},
                    {value: "1", name: "一起跑"},
                ];
                return this.$util.dictTranslate(arr, taskType)
            },
            //任务详情
            taskDetail(item){
                this.$router.push({
                    path:"/task/taskDetail",query:{taskId:item.taskId}
                })
            },

        },

    }
</script>

<style lang="scss" scoped>
    .taskIndex {
        line-height: 1.8;
        position: relative;
        padding-bottom: 50px;
        /* 分类栏样式*/
        .categoryBtnWrap {
            display: flex;
            justify-content: space-around;
            padding: 10px 4px;
            background: #FFFFFF;
            box-shadow: 0 1px 6px #e2691a6b;
            .categoryBtn {
                padding: 5px;
                border-radius:4px;
                font-size: 12px;

                text-align: center;
                margin: 0;
                background-color: #E69730;
                //padding: 0 4px;
                white-space:nowrap;
                text-overflow:ellipsis;
                -o-text-overflow:ellipsis;
                overflow:hidden;
            }
            .categoryBtn.active {
                background-color: #D82D11;
            }
        }
        .categoryCntWrap {
            display: flex;
            flex-wrap: wrap;
            background:rgba(245,245,245,1);
            padding: 4px;
            .categoryCnt {
                font-size: 12px;
                padding: 6px 8px;
                margin: 4px;
                border-radius: 4px;
            }
            .categoryCnt.active {
                background: #D82D11;
                color: #FFFFFF;
            }
        }
        .taskGoodsWrap {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            padding: 0 5px;
            .taskGoods {
                width: 45vw;
                border-radius: 4px;
                overflow-x: hidden;
                background: #FFFFFF;
                margin-bottom: 12px;
                position: relative;
                .goodsItem {
                    font-size: 12px;
                    padding: 0 4px;
                }
                .goodsItem:last-of-type {
                    padding-bottom: 4px;
                }
                .goodsItem.goodsName {
                    font-size: 14px;
                    white-space:nowrap;
                    text-overflow:ellipsis;
                    -o-text-overflow:ellipsis;
                    overflow:hidden;
                }
                .goodsItem.joinData {
                    display: flex;
                    justify-content: space-between;
                }
                .statusIcon {
                    position: absolute;
                    top: 0;
                    right: 0;
                    width: 100%;
                }
            }
            .taskItemTemp {
                width: 45vw;
                overflow-x: hidden;
                opacity: 0;
                display: none;
            }
            .taskItemTemp.active {
                display: block;
            }
            .noneData{
                padding: 10px;
            }
        }
       /* .van-pull-refresh {
            position: absolute;
            top: 180px;
            left: 0;
            right: 0;
        }*/

    }
</style>
